<template lang="html">
    <div id="tmpl">
        <!-- 1.0轮播图 -->
        <div class="slider">
            <slider :imgsurl='imgsurl'></slider>
        </div>
        <!--2.0 实现商品购买区-->
		<div id="buy">
			<h4 v-text="info.title"></h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价: <s>￥{{info.market_price}}</s>    销售价：<span>￥{{info.sell_price}}</span>
				</li>
				<li class="inputli">
					购买数量：<inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
                    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                        <div v-if="isshow" class="ball"></div>
                    </transition>
				</li>
				<li>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
				</li>
			</ul>
		</div>

		<div id="params">
				<h6>商品参数</h6>
				<p class="line"></p>
			<ul>
				<li>商品货号：{{info.goods_no}}</li>
				<li>库存情况：{{info.stock_quantity}}</li>
				<li>上架时间：{{info.add_time | datefmt('YYYY-MM-DD')}}</li>
			</ul>
		</div>

		<!--3.0 图文详情-->
		<!--4.0 商品评论-->
		<div id="other">
            <router-link v-bind="{to: '/goods/goodsdesc/' + id}">
			<mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to: '/goods/goodscomment/' + id}">
			<mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
		</div>

    </div>
</template>

<script>
import slider from '../subcom/slider.vue';
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';
import inputnumber from '../subcom/inputNumber.vue';

//引入 公用的vm对象。
import {vmmy, COUNTSTR} from '../../kits/vm.js';

import {setItem,valueObj} from '../../kits/localSg.js'


export default {
    components: {
        slider,
        inputnumber
    },
    data(){
        return {
            id: '',
            imgsurl: "",
            info: {},
            inputNumberCount: 1,
            isshow: false  //小球的显示与隐藏
        }
    },
    created(){
        this.id = this.$route.params.id;
        this.imgsurl = '/api/getthumimages/'+this.id;
        this.getinfo();
    },
    methods: {
        getinfo(){
            var url = common.apij + '/api/goods/getinfo/' + this.id;
            this.$http.get(url).then(function (res) {
                var body = res.body;
                if(body.status != 0) {
                    Toast(body.message);
                    return;
                }
                this.info = body.message[0];
            })
        },
        //获取传入的值
        getcount(count){
            this.inputNumberCount = count;
        },
        //加入购物车方法
        toshopcar(){
            // 1.0 触发事件
            vmmy.$emit(COUNTSTR,this.inputNumberCount);
            // 2.0 将数据保存到localStroage中
				valueObj.goodsid = this.id;
				valueObj.count = this.inputNumberCount;
				setItem(valueObj);

                //开始实现小球动画
                this.isshow = !this.isshow;
        },
        //实现小球动画
        beforeEnter(el){
            //设置小球的初识位置
            el.style.transform = 'translate(0px,0px)';
        },
        enter(el,done){
            //保证小球出现动画，刷新的作用
            el.offsetWidth;
            //设置小球结束位置
            el.style.transform = 'translate(75px,366px)';
            //结束动画
            done();
        },
        afterEnter(el){
            //重置小球的初识状态
            this.isshow = !this.isshow;
        }
    }
}
</script>

<style lang="css" scope>
.silder{
    border:1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    margin: 5px;
}
#buy,#params,#other
{
    margin: 5px;
    padding: 5px;
    border:1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
}
.line{
    height: 1px;
    border: 1px solid rgba(0,0,0,0.2);
}
#buy ul,#params ul{
    padding-left: 0px;
}
 #buy h4{
	 color:#0094ff;
	padding: 5px;
 }
 #buy li,#params li{
	 list-style: none;
	 padding: 8px;
 }

#buy .price span{
    color:red;
}

#other .imgdesc{
    margin-bottom: 20px;
}

.inputli{
    position: relative;
}
.inputnumber{
    position: absolute;
    left:100px;
    top:5px;
}

.ball{
	background-color: red;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	position: absolute;
	left:150px;
	top:10px;
	transition: all 0.4s ease;
	z-index: 100;
}
</style>
